<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            header, footer, main {
                display: block;
            }

            header {
                position: fixed;
                height: 50px;
                left: 0;
                right: 0;
                top: 0;
            }

            footer {
                position: fixed;
                height: 34px;
                left: 0;
                right: 0;
                bottom: 0;
            }

            main {
                margin-top: 50px;
                margin-bottom: 34px;
                height: 2000px
            }
            ul{
                list-style:none;
                margin: 0;
                padding: 0;
            }
            li{
                height: 30px;
                line-height: 30px;
                border-bottom:1px solid gray;
            }
        </style>
    </head>
    <body class="layout-fixed">
        <!-- fixed定位的头部 -->
        <header>
            
        </header>
        
        <!-- 可以滚动的区域 -->
        <main>
            <!-- 内容在这里... -->
            <ul>
                <li>第1</li>
                <li>第2</li>
                <li>第3</li>
                <li>第4</li>
                <li>第5</li>
                <li>第6</li>
                <li>第7</li>
                <li>第8</li>
                <li>第9</li>
                <li>第10</li>
                <li>第11</li>
                <li>第12</li>
                <li>第13</li>
                <li>第14</li>
                <li>第15</li>
                <li>第16</li>
                <li>第17</li>
                <li>第18</li>
                <li>第19</li>
                <li>第20</li>
                <li>第21</li>
                <li>第22</li>
                <li>第23</li>
                <li>第24</li>
                <li>第25</li>
                <li>第26</li>
                <li>第27</li>
                <li>第28</li>
                <li>第29</li>
                <li>第30</li>
                <li>第31</li>
                <li>第32</li>
                <li>第33</li>
                <li>第34</li>
                <li>第35</li>
                <li>第36</li>
                <li>第37</li>
                <li>第38</li>
                <li>第39</li>
                <li>第40</li>
                <li>第41</li>
                <li>第42</li>
                <li>第43</li>
                <li>第44</li>
                <li>第45</li>
                <li>第46</li>
                <li>第47</li>
                <li>第48</li>
                <li>第49</li>
                <li>第50</li>
                <li>第51</li>
                <li>第52</li>
                <li>第53</li>
                <li>第54</li>
                <li>第55</li>
                <li>第56</li>
                <li>第57</li>
                <li>第58</li>
                <li>第59</li>
                <li>第60</li>
                <li>第61</li>
                <li>第62</li>
                <li>第63</li>
                <li>第64</li>
                <li>第65</li>
                <li>第66</li>
                <li>第67</li>
                <li>第68</li>
                <li>第69</li>
                <li>第70</li>
                <li>第71</li>
                <li>第72</li>
                <li>第73</li>
                <li>第74</li>
                <li>第75</li>
                <li>第76</li>
                <li>第77</li>
                <li>第78</li>
                <li>第79</li>
                <li>第80</li>
                <li>第81</li>
                <li>第82</li>
                <li>第83</li>
                <li>第84</li>
                <li>第85</li>
                <li>第86</li>
                <li>第87</li>
                <li>第88</li>
                <li>第89</li>
                <li>第90</li>
                <li>第91</li>
                <li>第92</li>
                <li>第93</li>
                <li>第94</li>
                <li>第95</li>
                <li>第96</li>
                <li>第97</li>
                <li>第98</li>
                <li>第99</li>
                <li>第100</li>
            </ul>
        </main>
        
        <!-- fixed定位的底部 -->
        <footer>
            <input type="text" placeholder="Footer..."/>
            <button class="submit">提交</button>
        </footer>
    </body>
</html>